<#include "/admin/_inc/_head.html"/>
<#include "/admin/_inc/_layout.html" />
<!DOCTYPE html>
<html lang="en">

<head>
    <@head />
    <link href="/assets/css/plugins/iCheck/custom.css" rel="stylesheet">
</head>

<body>
    <@layout>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <form id="form" class="form-horizontal m-t" method="post"
                          action="<#if model?exists>${ctx_admin}/account/update<#else>${ctx_admin}/account/add</#if>">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">
                                用户名称
                            </label>
                            <div class="col-sm-8">
                                <input type="hidden" name="userId" value="${model.userId}">
                                <input type="text" placeholder="" name="name" class="form-control" required=""
                                       aria-required="true" value="${model.name}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">
                                真实名称
                            </label>
                            <div class="col-sm-8">
                                <input minlength="2" type="text" class="form-control" name="nickName" required=""
                                       aria-required="true" value="${model.nickName}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">
                                性别
                            </label>
                            <div class="col-sm-8">
                                <label class="radio-inline radio i-checks">
                                    <input type="radio" name="sex" value="1" <#if model.sex==1> checked="checked" </#if>
                                           id="sex1">
                                    男
                                </label>
                                <label class="radio-inline i-checks">
                                    <input type="radio" name="sex" value="2" <#if model.sex==2> checked="checked" </#if>
                                           id="sex2">
                                    女
                                </label>

                            </div>

                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">
                                头像图
                            </label>
                            <div class="col-sm-8">
                                <input type="text" id="avatar" name="avatar" value="${model.avatar}"
                                       class="form-control" required="" aria-required="true"
                                       style="display: inline-block; width: auto; vertical-align: middle;">
                                <span class="btn btn-primary fileinput-button" style="">
                                    <i class="fa fa-cloud-upload"></i>
                                    <span>上传图片</span>
                                    <input id="btn_avatar" type="file" name="file" multiple>
                                </span>

                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">
                                手机号
                            </label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" placeholder="" required="" aria-required="true"
                                       name="phone" value="${model.phone}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">
                                邮箱
                            </label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" placeholder="" required="" aria-required="true"
                                       name="eMail" value="${model.eMail}">
                            </div>
                        </div>

                        <#if !model??>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">
                                密码
                            </label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" placeholder="" name="password" required=""
                                       aria-required="true" value="${model.password}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">
                                确认密码
                            </label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" placeholder="" required=""
                                       aria-required="true" name="password2" value="${model.password2}">
                            </div>
                        </div>
                        </#if>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">
                                选择角色
                            </label>
                            <input id="_roleId" type="hidden" value="${roleId}">
                            <div class="col-sm-8">
                                <select class="form-control" required="" aria-required="true" id="roleId"
                                        name="roleId"></select>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3 text-center">
                                <button id="btn-submit" class="btn btn-primary" type="submit">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>

    </div>


    </@layout>

<script src="/assets/js/plugins/iCheck/icheck.min.js"></script>
<script src="/assets/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/assets/js/plugins/validate/messages_zh.min.js"></script>
<script src="/assets/js/plugins/jquery.form/jquery.form.js"></script>

<script src="/assets/js/plugins/jquery-file-upload/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="/assets/js/plugins/javascript-Load-Image/load-image.all.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="/assets/js/plugins/jquery-file-upload/jquery.fileupload-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",});


        $('#btn_avatar').fileupload({
            //inputid:'fileupload',//我要实例化哪个标签
            url: '/upload/avatar',//服务端的地址
            dataType: 'json',//数据格式，ajax你懂的
            autoUpload: true,//是否选了文件就直接自动上传
            maxNumberOfFiles: 1,//最多同时上传几个文件
            maxFileSize: 5000000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            //maxChunkSize:10000,//最大接收文件大小
            done: function (e, data) {//上传完了干嘛
                var res = data.result;
                if (res.success) {
                    $('#avatar').val(res.url);
                    layer.msg(res.message, {icon: 1, time: 2000}, function () {
                    });
                } else {
                    layer.msg(res.message, {icon: 2, time: 3000}, function () {
                    });
                }

            },
            progressall: function (e, data) {//上传过程中，隔段时间就会调起的回调函数，这个东西，主要是用来返回进度的，你看里面的引用，没错，它带回来的参数值，只有total、loaded这种数字。

            },
            processalways: function (e, data) {
            }
        }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');//不用猜了，就是看看是不是支持jqueryajax上传方式。就是上面说的那个frame东东。


        $.ajax({
            type: "POST",
            data: {},
            dataType: 'json',
            url: global.adminPath + '/role/data',
            success: function (res) {
                if (res.success) {
                    var roleId = $('#roleId');
                    var data = res.data;
                    roleId.append('<option value="">选择角色</option>');
                    for (var i = 0; i < data.length; i++) {
                        var role = data[i];
                        roleId.append('<option value="' + role.roleId + '">' + role.roleName + '</option>');
                    }
                    $('#roleId').val($('#_roleId').val());
                }
            }
        });

        $("#form").validate({
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    type: 'post',
                    url: form.action,
                    success: function (data) {
                        if (data.success) {
                            layer.msg(data.message, {icon: 1, time: 2000}, function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.$table.bootstrapTable('destroy');
                                parent.initTable();
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(data.message, {icon: 2, time: 3000}, function () {
                            });
                        }
                    },
                    error: function (XmlHttpRequest, textStatus, errorThrown) {
                        layer.msg('error!', {icon: 2, time: 3000}, function () {
                        });
                    }
                });
            }
        });

    });
</script>


</body>

</html>